<script setup>
import { ref } from 'vue'
import { cnSongs, forgSongs } from '@/assets/data'

const sheetStateValue = [
  {
    active: false,
    title: '一字歌',
    contents: cnSongs.filter((e) => e.length === 1),
    cssId: 'one',
  },
  {
    active: false,
    title: '二字歌',
    contents: cnSongs.filter((e) => e.length === 2),
    cssId: 'two',
  },
  {
    active: false,
    title: '三字歌',
    contents: cnSongs.filter((e) => e.length === 3),
    cssId: 'three',
  },
  {
    active: false,
    title: '四字歌',
    contents: cnSongs.filter((e) => e.length === 4),
    cssId: 'four',
  },
  {
    active: false,
    title: '多字歌',
    contents: cnSongs.filter((e) => e.length > 4),
    cssId: 'five',
  },
  {
    active: false,
    title: '外语标题',
    contents: forgSongs,
    cssId: 'many',
  },
]

const sheetState = ref(sheetStateValue)

const handleCatClick = (state) => {
  sheetState.value.forEach((e) => (e.active = false))
  state.active = true
}

const diceRollResult = ref("");

const handleDiceRoll = async () => {
  diceRollResult.value = randomSong()
  await navigator.clipboard.writeText(diceRollResult.value)
}

function randomSong() {
  let songs = cnSongs.concat(forgSongs)
  let i = Math.floor(Math.random() * songs.length)
  return songs[i]
}
</script>

<template>
  <div class="bg" id="bg01"></div>
  <div class="bg" id="bg02"></div>
  <div class="bg" id="bg03"></div>
  <div class="bg" id="bg04"></div>
  <div class="bg" id="bg05"></div>
  <div class="bg" id="bg06"></div>
  <div class="bg" id="bg07"></div>
  <div class="bg" id="bg08"></div>
  <header>
    <img src="./assets/avatar.webp" />
    <h1>米宝的歌单</h1>
    <div id="dice-wrapper">
      <button @click="handleDiceRoll">
        <span id="dice">🎲</span>
      </button>
      <span id="dice-result">{{ diceRollResult }}</span>
    </div>
  </header>
  <main>
    <ul id="categories">
      <li v-for="state in sheetState">
        <span
          :style="state.active ? { color: 'var(--ctp-latte-peach)' } : {}"
          @click="handleCatClick(state)"
          >{{ state.title }}</span
        >
      </li>
    </ul>
    <div id="tip" style="padding-top: 8px" v-if="!sheetState.some((e) => e.active)">
      ⬅️请点击分类查看喔
    </div>
    <div :style="{ flexGrow: state.active ? '3' : '0' }" v-for="state in sheetState">
      <div
        :class="state.contents.some((e) => e.length > 8) ? 'song-titles-xl' : 'song-titles'"
        v-if="state.active"
      >
        <div class="song-title" v-for="song in state.contents">{{ song }}</div>
      </div>
    </div>
    <div style="padding-bottom: 2rem" id="list" v-for="state in sheetState">
      <div v-for="(song, index) in state.contents">
        <div style="text-align: center" v-if="index === 0">{{ state.title }}</div>
        <p style="color: var(--ctp-latte-text); text-align: center">{{ song }}</p>
      </div>
    </div>
  </main>
  <footer>
    <div id="icp">
      <img src="@/assets/icp.png" alt="icp" width="20px" height="20px" />
      <a href="https://beian.miit.gov.cn/" target="_blank" style="padding-left: 0.5em"
        >辽ICP备2025052487号-1</a
      >
    </div>
  </footer>
</template>

<style scoped>
#icp {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 10px;
  font-size: 12px;
  opacity: 50%;
  /* z-index: -1; */
}

#icp a {
  color: var(--ctp-latte-overlay0);
  text-decoration: none;
  height: max-content;
  align-self: flex-end;
}

* {
  color: var(--ctp-latte-sky);
}

header {
  grid-row: 1 / span 1;
  grid-column: 1 / span 3;
  padding: 20px;
  padding-top: 80px;
  display: flex;
  justify-content: center;
}

header h1 {
  height: min-content;
  align-self: end;
}

main {
  justify-self: center;
}

#categories,
#tip,
.song-title,
.song-titles,
.song-titles-xl {
  display: none;
}

li {
  list-style-type: none;
  padding: 4px 0 4px 0;
}

li span {
  cursor: pointer;
}

.bg {
  position: fixed;
  z-index: -100;
  background-size: contain;
  opacity: 70%;
  scale: 80%;
}

#bg01 {
  top: -100px;
  left: -568px;
  background-image: url('@/assets/001-s.png');
  width: 815px;
  height: 768px;
  rotate: 102deg;
}

#bg02 {
  top: -180px;
  right: -320px;
  background-image: url('@/assets/002-s.png');
  width: 864px;
  height: 490px;
  rotate: 39deg;
}

#bg03 {
  bottom: -100px;
  right: -568px;
  background-image: url('@/assets/001-s.png');
  width: 815px;
  height: 768px;
  rotate: 282deg;
}

#bg04 {
  bottom: -180px;
  left: -320px;
  background-image: url('@/assets/002-s.png');
  width: 864px;
  height: 490px;
  rotate: 219deg;
}

#dice-wrapper {
  margin-left: 1rem;
  height: min-content;
  align-self: flex-end;
  padding-bottom: 0.5rem;
}

#dice-wrapper button {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 1.1rem;
}

@media (min-width: 1024px) {
  #categories,
  #tip,
  .song-title {
    display: block;
  }
  header {
    justify-content: left;
  }
  main {
    grid-row: 2 / last-line;
    grid-column: 1 / last-line;
    display: flex;
    justify-self: auto;
  }

  #list {
    display: none;
  }

  #categories {
    padding: 4px 20px 4px 4px;
    text-align: right;
    flex-basis: max-content;
  }

  .song-titles {
    padding-left: 1em;
    display: grid;
    grid-template-columns: repeat(4, 8em);
  }

  .song-titles-xl {
    padding-left: 1em;
    display: grid;
    grid-template-columns: repeat(2, max-content);
  }

  .song-title {
    color: var(--ctp-latte-text);
    padding: 6px;
  }

  #bg05 {
    display: none;
    top: -230px;
    left: 100px;
    background-image: url('@/assets/003-s.png');
    width: 306px;
    height: 644px;
    rotate: 102deg;
  }

  #bg06 {
    bottom: -230px;
    right: 100px;
    background-image: url('@/assets/003-s.png');
    width: 306px;
    height: 644px;
    rotate: 282deg;
  }

  #bg07 {
    top: -230px;
    right: 100px;
    background-image: url('@/assets/004-s.png');
    width: 400px;
    height: 495px;
    rotate: -156deg;
  }
}
</style>
